<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<link rel="stylesheet" href="images/UrbanArtist.css" type="text/css" />

<script src="jquery.js" type="text/javascript" charset="utf-8"></script>
<script src="jquery.valid8.js" type="text/javascript" charset="utf-8"></script>


<!-- <script src="jquery.js" type="text/javascript" charset="utf-8"></script> -->
<script src="jquery-1.3.1.min.js"></script>
<script src="jquery-ui-1.7.custom.min.js"></script>

<script src="jquery.valid8.js" type="text/javascript" charset="utf-8"></script>

<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
	// some documentation on using the valid8 plugin
	// http://www.unwrongest.com/projects/valid8/


	function verifyPassword(args){
		if(args.password == args.check)
			return {valid:true}
		else
			return {valid:false, message:'Error: Passwords do not match'}
	}
	
	// checks username boxes for validity using the valid8 plugin
	// code must remain in "$(document).ready(function(){" area
	$('#inputUsername').valid8({
		reguglarExpressions: [
			{expression: /^.+$/, errormessage: 'Error: Username is required.'},
			{expression: /^([a-zA-Z0-9])+$/, errormessage: 'Error: Username must consist of only letters and numbers.'}
		]
	});
	
	// checks password boxe for validity using the valid8 plugin
	// code must remain in "$(document).ready(function(){" area
	$('#inputPassword').valid8({
		reguglarExpressions: [
			{expression: /^.+$/, errormessage: 'Error: Password is required.'},
			{expression: /^([a-zA-Z0-9])+$/, errormessage: 'Error: Password must consist of only letters and numbers.'}
		],
	});
	
	// checks 2nd password boxe for validity using the valid8 plugin
	// code must remain in "$(document).ready(function(){" area
	$('#inputVerifyPassword').valid8({
		reguglarExpressions: [
			{expression: /^.+$/, errormessage: 'Error: Password is required.'},
			{expression: /^([a-zA-Z0-9])+$/, errormessage: 'Error: Password must consist of only letters and numbers.'}
		],
		jsFunctions:[
			{ 'function': verifyPassword, 'values': function(){
				return {password: $('#inputPassword').val(), check: $('#inputVerifyPassword').val()}
			}}
		]
	});
	
	$('#register').click(function(){
		if ($('input').isValid() == true) {
			var clientid = $("#inputUsername")[0].value.toLowerCase();
			var password = $("#inputPassword")[0].value;
			var registerURL = "http://tornado.ics.uci.edu:8080/pimp/WebResponder?&type=register&clientID="+clientid+"&password="+password;
			$.get(registerURL, function(data){
				if (data == 1){
					alert("Congratulations!!!\nYour account has been created!\nYou can now log in.");
					// redirect to homepage/loginpage
					location.href="index.jsp";
				} else {
					alert("I am extremely apologetic:\nThe name you want is taken. Try again.");
				}
			});
		} else if ($('input').isValid() == false) {
			alert('ERROR: Invalid input, please reenter your login according to the listed requirements.');
		}
	});
	
});	// end $(document).ready(function(){
</script>

<title>pIMp: Register</title>
</head>

<body>

<!-- wrap starts here -->
<div id="wrap">

	<!--header -->
	<div id="header">			
		
		<!--
		<h1 id="logo-text"><a href="index.jsp" title="">pIMp</a></h1>		
		<p id="intro">register</p>
		-->
		
		<div  id="nav">
			<ul>
				<li><a href="index.jsp">Home</a></li>
				<li id="current"><a href="register.jsp">Register</a></li>
				<li><a href="downloads.jsp">Downloads</a></li>
			</ul>		
		</div>	
						
	<!--header ends-->					
	</div>
	
	<!-- content-wrap starts -->
	<div id="content-wrap">
				
		<div id="main">
			<a name="TemplateInfo"></a>
			<h2><a href="index.jsp">Register</a></h2>
			
			<table><tr><td>
				<p>
					<label for="inputUsername">New Username:</label>
					<input type="text" value="" id="inputUsername"/>
				</p>
				<p>
					<label for="inputPassword">New Password:</label>&nbsp;
					<input type="password" id="inputPassword">
				</p>
				<p>
					<label for="inputVerifyPassword">Verify New Password:</label>
					<input type="password" name="inputVerifyPassword" id="inputVerifyPassword">
				</p>
				<p>	
					<button id="register">Create account</button>
				</p>
			</td></tr></table>
			
		<!-- main ends -->	
		</div>
		
		<!-- sidebar starts -->
		<div id="sidebar">

			<h3>Navigation Menu</h3>
			<ul class="sidemenu">	
				<li><a href="index.jsp">Home</a></li>
				<li><a href="downloads.jsp">Downloads</a></li>
			</ul>

			<h3>Creators</h3>
			<ul class="sidebar">
					<li><strong><u>Team 2</u></strong></li>
					<li>Chad Curtis</li>
    				<li>Scott Ditch</li>
    				<li>Robert Duncan</li>
    				<li>Alexander Doan</li>
    				<li>Matt Fritz</li>
    				<li>Robert Jolly</li>
    				<li>Alex Kaiser</li>
    				<li>Dan Morgan</li>
    				<li>Scott Roeder</li>
    				<li>James Rose</li>
				    <li>David Schramm</li>
					<li>Jordan Sinclair</li>
					<li>Josh Villamarzo</li>
			</ul>
			
	
		<!-- sidebar ends -->		
		</div>
		
	<!-- content-wrap ends-->	
	</div>

	<!-- footer starts here -->	
	<div id="footer">
	
		<div id="footer-left">
			<p>
			Template Design by: <a href="http://www.styleshout.com/">styleshout</a>	&nbsp; 
			</p>	
		</div>
		
		<div id="footer-right">
			<p class="align-right">
			<a href="index.jsp">Home</a> | <a href="http://www.ics.uci.edu/~andre/informatics122w2009.html">Class Site</a>
			</p>
		</div>
		
	</div>
	<!-- footer ends here -->
	
<!-- wrap ends here -->
</div>

</body>
</html>
